import React, { Component } from 'react'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { Dropdown, Layout, Menu } from 'antd'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import Avatar from 'antd/es/avatar/avatar'

const { Header } = Layout

class Headers extends Component {
    state = {
        collapsed: !this.props.open,
    }

    toggle = () => {
        if (this.props.open) {
            this.props.closeIt()
        } else {
            this.props.openIt()
        }
    }

    logOut = () => {
        sessionStorage.clear()
        this.props.history.replace('/')
        console.log('退出')
    }

    menu = () => {
        return (<Menu>
            <Menu.Item onClick={this.logOut} key={'logout'}>退出登录</Menu.Item>
        </Menu>)
    }

    render () {
        return (
            <Header className="site-layout-background multipart" style={{ padding: '0 20px', }}>
                {/*JSX语法*/}
                {React.createElement(this.props.open ? MenuFoldOutlined : MenuUnfoldOutlined, {
                    className: 'trigger',
                    onClick: this.toggle,
                })}
                <div style={{ flex: 1, textAlign: 'right' }}></div>
                <Dropdown overlay={this.menu}>
                    <div>
                        <label style={{ marginRight: 10 }}>{sessionStorage.getItem('current')}</label>
                        <Avatar src="https://joeschmoe.io/api/v1/random"/>
                    </div>
                </Dropdown>
            </Header>)
    }
}

export default connect((state) => {
    return {
        open: state.getIn(['slide', 'open'])
    }
}, (dispatch) => {
    return {
        openIt: () => {
            dispatch({ type: 'open' })
        },
        closeIt: () => {
            dispatch({ type: 'collapse' })
        }
    }
})(withRouter(Headers))
